<template>
  <div class="bookshelf">
    <div class="nav">
      <van-nav-bar title="书架" :right-text="text" @click-right="edit" />
    </div>
    
    <div class="content" v-if="isLogin">
      <div class="content-list" v-if="isEdit">
        <div class="content-list-item" v-for="item in books" :key="item.bookId">
          <div class="contentList-item-img">
            <img :src="item.cover" />
          </div>
          <div class="title">{{ item.title }}</div>
          <div class="input" :style="{ display: display }">
            <input type="checkbox" v-model="item.isCheck" @change="selectOne" />
          </div>
        </div>
      </div>
      <div class="content-list" v-else>
        <div
          class="content-list-item"
          v-for="item in books"
          :key="item.bookId"
          @click="getId(item.bookId)"
        >
          <div class="contentList-item-img">
            <img :src="item.cover" />
          </div>
          <div class="title">{{ item.title }}</div>
          <div class="input" :style="{ display: display }">
            <input type="checkbox" v-model="item.isCheck" @change="selectOne" />
          </div>
        </div>
      </div>
    </div>
    <div v-else>
      <van-empty image="error" description="请先登录">
        <van-button
          round
          type="danger"
          class="bottom-button"
          color="#0C34BA"
          @click="goLogin"
        >
          去登录
        </van-button>
      </van-empty>
    </div>
    <div class="foot" :style="{ display: display }">
      <div class="nav">
        <van-nav-bar right-text="删除" @click-right="removeBook">
          <template #left>
            <input type="checkbox" v-model="isAllSelect" @change="allSelect" />
            <p>全选</p>
          </template>
        </van-nav-bar>
      </div>
    </div>
    <div v-if="books.length === 0">
      <van-empty description="书架里没有书！" />
    </div>
  </div>
</template>

<script>
export default {
  name: "bookshelf",
  data() {
    return {
      //全选状态
      isAllSelect: false,
      //书架数据
      books: [],

      //是否处于编辑状态
      isEdit: false,
      text: "编辑",
      display: "none",
      //登录状态
      isLogin: true,
    };
  },
  created() {
    //读取存储的books来生成书籍
    let books = JSON.parse(localStorage.getItem("books"));
    books.forEach((v) => {
      // console.log("v==>", v.bookId);
      this.getbooks(v.bookId);
    });
    this.getLogin();
  },
  methods: {
    //书籍详情
    getbooks(sourceUuid) {
      //发起申请
      this.axios({
        //请求类型
        method: "get",
        //请求路径
        url: "https://apis.netstart.cn/yunyuedu/book/info.json",
        params: {
          sourceUuid,
        },
      })
        .then((result) => {
          // console.log("result.data.data.book==>", result.data.data.book);
          let a = result.data.data.book;
          a.isCheck = false;
          this.books.push(a);
        })
        .catch((err) => {
          console.log("err ==> ", err);
        });
    },
    //编辑
    edit() {
      this.isEdit = !this.isEdit;
      this.text = this.isEdit ? "完成" : "编辑";
      this.display = this.isEdit ? "block" : "none";
    },
    //去登录
    goLogin() {
      this.$router.push({ name: "login" });
    },
    //全选
    allSelect() {
      for (let i = 0; i < this.books.length; i++) {
        // if (this.isAllSelect === true) {
        //   this.books[i].isCheck = true;
        // } else {
        //   this.books[i].isCheck = false;
        // }
        this.books[i].isCheck = this.isAllSelect;
      }
    },
    //单选
    selectOne() {
      for (let i = 0; i < this.books.length; i++) {
        if (!this.books[i].isCheck) {
          this.isAllSelect = false;
          return;
        }
      }
      this.isAllSelect = true;
    },
    //删除书籍
    removeBook() {
      let books = JSON.parse(localStorage.getItem("books"));

      //获取删除的书籍数据的sid
      let bookIds = [];
      this.books.forEach((item) => {
        if (item.isCheck) {
          bookIds.push(item.bookId);
        }
      });
      console.log("bookIds ==> ", bookIds);
      bookIds.forEach((sid) => {
        console.log("sid", sid);
        for (let i = this.books.length - 1; i >= 0; i--) {
          if (sid === this.books[i].bookId) {
            this.books.splice(i, 1);
            books.splice(i, 1);
            break;
          }
        }
      });
      localStorage.setItem("books", JSON.stringify(books));
    },
    //得到书籍的id
    getId(pid) {
      console.log("pid ==> ", pid);
      this.$router.push({ name: "noveldetail", params: { pid } });
    },
    //获取登录状态
    getLogin() {
      let loginUserInfo = JSON.parse(localStorage.getItem("loginUserInfo"));
      if (!loginUserInfo) {
        this.isLogin = false;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.bookshelf {
  width: 100%;
  height: 100%;
  .nav {
    margin-bottom: 20px;
  }
  .content {
    width: 100%;
    height: 100%;
    padding-bottom: 100px;
    .content-list {
      display: flex;
      flex-wrap: wrap;
      padding-left: 18px;
      .content-list-item {
        width: calc(33% - 10px);
        margin-bottom: 10px;
        margin-right: 10px;
        position: relative;
        .contentList-item-img {
          width: 100%;
          height: 150px;
          img {
            width: 100%;
            height: 100%;
            border-radius: 10px;
          }
        }
        .input {
          position: absolute;
          top: -10px;
          right: -10px;
          input {
            width: 20px;
            height: 20px;
            border-radius: 20px;
          }
        }
      }
    }
  }
  .foot {
    position: fixed;
    bottom: 45px;
    width: 100%;
    height: 50px;
  }
}
</style>